<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:ic="http://ivyteam.ch/jsf/component"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:pm="http://primefaces.org/mobile">
 	
 	<p:dialog id="editingQuesDialog" modal="true" widgetVar="editingQuesDialog" style="width:768px;"
 		header="#{data.questionDialogTitle}">
   	<h:form id="questionInfo">
    	<p:panelGrid columns="3" style="width:100%">
    		<p:outputLabel value="#{ivy.cms.co('/axonactive/vision/training/formEditingQuestion/lblQuestionTitle')}"></p:outputLabel>
    		<p:inputText id="questionTitle" value="#{data.editedQuestionDTO.question.question}" style="width:100%" required="true" requiredMessage="#{ivy.cms.co('/axonactive/vision/training/lblRequired')}"></p:inputText>
    		<p:message for="questionTitle"></p:message>
    		<p:outputLabel value="#{ivy.cms.co('/axonactive/vision/training/formEditingQuestion/lblType')}"></p:outputLabel>
    		<p:selectOneMenu value="#{data.editedQuestionDTO.question.type}" >
    			<f:selectItem itemValue="Single choice" itemLabel="Single" ></f:selectItem>
    			<f:selectItem itemValue="Multiple choice" itemLabel="Multiple"></f:selectItem>
    			<p:ajax event="change" update=":#{p:component('rightAnswer')}"></p:ajax>
    		</p:selectOneMenu>
    		<p:outputLabel value=""></p:outputLabel>
    	</p:panelGrid>
    	<p:panelGrid columns="3" style="width:100%">
    		<p:outputLabel value="#{ivy.cms.co('/axonactive/vision/training/formEditingQuestion/lblAnswerA')}"></p:outputLabel>
    		<p:inputText id="ans1" value="#{data.editedQuestionDTO.question.ans1}" required="true" requiredMessage="#{ivy.cms.co('/axonactive/vision/training/lblRequired')}"></p:inputText>
    		<p:message for="ans1"></p:message>
    		<p:outputLabel value="#{ivy.cms.co('/axonactive/vision/training/formEditingQuestion/lblAnswerB')}"></p:outputLabel>
    		<p:inputText id="ans2" value="#{data.editedQuestionDTO.question.ans2}" required="true" requiredMessage="#{ivy.cms.co('/axonactive/vision/training/lblRequired')}"></p:inputText>
    		<p:message for="ans2"></p:message>
    		<p:outputLabel value="#{ivy.cms.co('/axonactive/vision/training/formEditingQuestion/lblAnswerC')}"></p:outputLabel>
    		<p:inputText id="ans3" value="#{data.editedQuestionDTO.question.ans3}" required="true" requiredMessage="#{ivy.cms.co('/axonactive/vision/training/lblRequired')}"></p:inputText>
    		<p:message for="ans3"></p:message>
    		<p:outputLabel value="#{ivy.cms.co('/axonactive/vision/training/formEditingQuestion/lblAnswerD')}"></p:outputLabel>
    		<p:inputText id="ans4" value="#{data.editedQuestionDTO.question.ans4}" required="true" requiredMessage="#{ivy.cms.co('/axonactive/vision/training/lblRequired')}"></p:inputText>
    		<p:message for="ans4"></p:message>
    		<p:outputLabel value="#{ivy.cms.co('/axonactive/vision/training/formEditingQuestion/lblRightAnswer')}"></p:outputLabel>
			<p:outputPanel id="rightAnswer" >
				<p:selectOneRadio id="rightAnswerRadio" value="#{data.editedQuestionDTO.selectedRadio}"
					rendered="#{data.editedQuestionDTO.question.type=='Single choice'}" layout="lineDirection">
					<f:selectItem itemValue="A" itemLabel="A" />
					<f:selectItem itemValue="B" itemLabel="B" />
					<f:selectItem itemValue="C" itemLabel="C" />
					<f:selectItem itemValue="D" itemLabel="D" />
				</p:selectOneRadio>
				<p:selectManyCheckbox id="rightAnswerCheckbox" value="#{data.editedQuestionDTO.listSelectedCheckBox}"
					rendered="#{data.editedQuestionDTO.question.type=='Multiple choice'}"
					layout="lineDirection" required="true" requiredMessage="#{ivy.cms.co('/axonactive/vision/training/lblRequired')}">
					<f:selectItem itemValue="A" itemLabel="A" />
					<f:selectItem itemValue="B" itemLabel="B" />
					<f:selectItem itemValue="C" itemLabel="C" />
					<f:selectItem itemValue="D" itemLabel="D" />
				</p:selectManyCheckbox>
			</p:outputPanel>
			<p:message for="rightAnswerCheckbox"></p:message>
	</p:panelGrid>
    	<p:outputPanel>
    		<p:outputPanel style="float:right;">
    			<p:commandButton value="#{ivy.cms.co('/axonactive/vision/training/lblSave')}" actionListener="#{logic.saveQuestion}" update=":#{p:component('examInfo')}, :#{ p:component('questionInfo')}"></p:commandButton>
    			<p:commandButton value="#{ivy.cms.co('/axonactive/vision/training/lblCancel')}" style="margin-left:10px;" onclick="editingQuesDialog.hide()" immediate="true" process="@this" actionListener="#{logic.resetQuestion}"></p:commandButton>
    		</p:outputPanel>
    	</p:outputPanel>
    	</h:form>
    </p:dialog>
    
</html>